<template>
  <div>
    <h2>文章发布页/编辑页</h2>
    <!-- 1.0 标题 -->
    <el-form label-width="100px">
      <el-form-item label="标题">
        <!-- <h3>标题</h3> -->
        <el-input
          v-model="form.title"
          placeholder="请输入文章标题"
        />
      </el-form-item>
      <!-- 2.0 文章内容 - 富文本组件 -->
      <el-form-item label="内容">
        <!-- <h3>内容</h3> -->
        <VueEditor v-model="form.content" />
      </el-form-item>
      <!-- 3.0 栏目 -->
      <el-form-item label="栏目">
        <!-- <h3>栏目</h3> -->
        <el-checkbox-group v-model="categoriesTemp">
          <el-checkbox
            v-for="item in categoriesList"
            :key="item.id"
            :label="item.id"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 4.0 文章封面 -->
      <el-form-item label="封面">
        <!-- <h3>封面</h3> -->
        <el-upload
          :action="$baseURL + '/upload'"
          list-type="picture-card"
          :headers="{
            Authorization: token
          }"
          :on-success="uploadSuccess"
          :on-remove="uploadRemove"
          :file-list="fileListTemp"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <!-- 5.0 类型 -->
      <el-form-item label="类型">
        <!-- <h3>类型</h3> -->
        <el-radio-group v-model="form.type">
          <!-- 接口规定的：1为文章，2为视频 -->
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 6.0 提交按钮 -->
      <el-form-item label="">
        <!-- <h3>提交文章</h3> -->
        <el-button
          @click="formSubmitHandle"
          type="primary"
          v-if="!id"
        >提交</el-button>
        <el-button
          @click="formUpdateHandle"
          type="success"
          v-else
        >编辑更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 🧨经验：做后台管理系统，都是《面向接口编程》，一定要看清楚接口文档的参数要求
import { getToken } from "@/utils/myToken";
// 1. 安装 npm install vue2-editor
// 2. 导入富文本编辑器组件
import { VueEditor } from "vue2-editor";
import {
  getCategory,
  addPostArticle,
  getPostById,
  updatePostArticle,
} from "@/api";
export default {
  components: {
    // 3. 注册富文本编辑器
    VueEditor,
  },
  data() {
    return {
      // 临时的栏目数组 [1, 2]，不复合后端接口要求
      categoriesTemp: [],
      categoriesList: [],
      fileListTemp: [],
      token: getToken(),
      id: 0,
      // 发布文章的 5 个必要参数，默认值
      form: {
        title: "",
        content: "",
        // 🚩 真正接口所需的栏目格式数据为 [{id:1},{id:2}]
        categories: [],
        cover: [],
        type: 1,
      },
    };
  },
  watch: {
    // 监听临时栏目数组
    categoriesTemp(arr) {
      // 当数组发生变化时，通过 map 把值映射成后端需要的数据格式
      // [1, 2] ----map映射成---->   [{id:1}, {id:2}]
      this.form.categories = arr.map((item) => {
        return { id: item };
      });
    },
  },
  created() {
    // 发送请求获取栏目数据
    getCategory().then((res) => {
      // console.log(res.data.data);
      this.categoriesList = res.data.data.slice(2);
    });
    // 先获取页面是否有 id 参数
    const { id } = this.$route.query;
    if (id) {
      this.id = id;
      console.log("根据id获取文章数据", id);
      this.getPostDetailData();
    }
  },
  methods: {
    getPostDetailData() {
      // 从服务器中获取之前的文章详情内容
      getPostById(this.id).then((res) => {
        console.log("文章详情数据", res.data.data);
        const { title, content, type, categories, cover } = res.data.data;
        // 文章标题
        this.form.title = title;
        // 🚩注意点3：文章内容，VueEditor 组件不支持 div 标签名，需要替换成 p 标签
        this.form.content = content.replace(/div/g, "p");
        // 文章类型
        this.form.type = type;

        // 🚩注意点1：把 categories 选中的分类按 Element 组件要求处理数据格式
        this.categoriesTemp = categories.map((item) => item.id);

        // 🚩注意点2：图片预览地址拼接
        this.fileListTemp = cover.map((item) => {
          // let url = item.url;
          // if (item.url.startsWith("http") === false) {
          //   url = this.$baseURL + item.url;
          // }
          return {
            ...item,
            url: item.url.startsWith("http") ? item.url: this.$baseURL + item.url,
            uid: item.id, // uid 是用于 upload 组件列表渲染的 key 值，不能重复
          };
        });
      });
    },
    // :on-success="uploadSuccess"  注意这个钩子需要写成属性的写法
    uploadSuccess(response, file, fileList) {
      // console.log("后端返回的结果 response", response); // 需要从后端返回的数据中获取图片在服务器的 id
      // console.log("所有的文件列表 fileList", fileList);
      // console.log("当前上传的文件 file", file);
      // 把服务器图片 id ，存储到 file 对象中。
      file.id = response.data.id;
      this.fileListTemp = fileList;
      this.form.cover = fileList.map((item) => {
        return { id: item.id };
      });
    },
    uploadRemove(file, fileList) {
      // console.log("删除图片后的fileList", fileList);
      // 删除的时候也要根据 fileList 获取剩下来的 id 值
      this.fileListTemp = fileList;
      this.form.cover = fileList.map((item) => {
        return { id: item.id };
      });
    },
    // 点击了提交按钮
    formSubmitHandle() {
      addPostArticle(this.form).then((res) => {
        // console.log(res.data);
        if (res.data.message === "文章发布成功") {
          this.$message.success("发布成功");
          this.$router.push("/postlist");
        } else {
          this.$message.error("参数错误");
        }
      });
    },
    formUpdateHandle() {
      updatePostArticle({
        id: this.id,
        ...this.form,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.message === "文章编辑成功") {
          this.$message.success("文章编辑成功");
          this.$router.push("/postlist");
        } else {
          this.$message.error("参数错误");
        }
      });
    },
  },
};
</script>

<style>
</style>